<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>    
<%@include file="../common/common.jsp"%>  
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品分类列表页</title>
	</head>
	<body>
		<%@include file="../common/header.jsp"%>  
		<div class="same container clearfix">
			<!-- 引入购物车文件    标签开始 -->
			<%@ include file="../common/top.jsp"%>
			<!-- 引入购物车文件    标签结束 -->
			
			<div class="nav f16">
				<!-- 引入商品分类信息   开始 -->
				<%@ include file="../common/goods_class.jsp"%>
				<!-- 引入商品分类信息   结束 -->
				<!-- <a href="index.html" class="first selected">首页</a>
				<a href="new_products.html">新品推荐</a>
				<a href="product_center.html">产品中心</a>
				<a href="hot_sale.html">热销产品</a>
				<a href="special_pro.html">特价产品</a>
				<a href="store_trends.html">商城动态</a>
				<a href="about_us.html">关于我们</a> -->
				<!-- 引入 导航栏的信息  开始 -->
				<%@ include file="../common/nav.jsp"%>
				<!-- 引入 导航栏的信息  结束 -->
				
			</div>
		</div>
		<div class="p_list container clearfix">
			<p class="nine">当前位置:首页>${param.className}</p>
			<div class="left l">
				<div class="rank border six">
					<a href="javascript:void(0);" onclick="btnSort('')" class="selected">综合排序</a>
					<a href="javascript:void(0);" onclick="btnSort('1')">人气</a>
					<a href="javascript:void(0);" onclick="btnSort('3')">销量</a>
					<a href="javascript:void(0);" onclick="btnSort('5')">价格</a>
				
				</div>	
				
				<!--   商品列表展示         开始-->
				<div class="main">
					<input type="hidden" name="classId" id="class_Id" value="${classId}">
					<ul class="clearfix" id="pro_list">
						<c:forEach items="${goodsList}" var="goods">
							<li>
								<div class="img">
									<a href="${ctx}/goods/queryGoodsDetail?id=${goods.id}" target="_blank" >
										<c:choose>
											<c:when test="${goods.picture!=null and goods.picture!=''}">
												<img src="${baseFile}${goods.picture}" alt="" />
											</c:when>
											<c:otherwise>
												<img src="${ctx}/images/tu1-big.png" alt="" />
											</c:otherwise>
										</c:choose>
									</a>
								</div>
								<div class="small_img">
									<c:set value="${fn:split(goods.imageFile, ';')}" var="imgList"></c:set>
									<!-- 获取默认图片 -->
									<span class="selected"><img src="${baseFile}${imgList[0]}" alt="" /></span>
									<!-- 获取 其余图片 -->
									<c:forEach var="img" items="${imgList}" varStatus="status">
										<c:if test="${status.index>0 and status.index<3}">
											<span><img src="${baseFile}${img}" alt="" /></span>
										</c:if>
									</c:forEach>	
								</div>
								
								<p class="moreWord">${goods.name }</p>
								<p class="prices">
									<%-- ¥ ${goods.marketPrice } --%>
									<p class="sales" style="height: 22px;">${goods.proTitle }</p>
									<span>月销 ${goods.monthSaleMount}笔</span>
								</p>
								<p><span class="f20 red">￥${goods.marketPrice }</span><a href="${ctx}/goods/queryGoodsDetail?id=${goods.id}" class="r f12 buy">立即购买</a></p>
								<%-- <p class="six des">${goods.name}</p> --%>
								
								
								
							</li>
						</c:forEach>
					</ul>
				</div>
			</div>
			
			
		<!-- <div class="allll"></div> -->
     <%-- 	<ul class="evaluateGoods allgoodsList searchResultO" id="searchGoodsListT">
     		<c:forEach items="${resultList}" var="goods" varStatus="status">
     			<c:choose>
     				<c:when test="${status.count%2!=0 }">
     					<li class="fl">
     				</c:when>
     				<c:otherwise>
     					<li class="fr">
     				</c:otherwise>
     			</c:choose>
       				<a href="${ctx}/goods/queryGoodsDetail?id=${goods.id}">
						<c:choose>	
							<c:when test="${goods.picture!=null}">
								<img src="${baseFile}${goods.picture}" alt="" class="evaluateGoodsI evaluateGoodsM" />
							</c:when>
							<c:otherwise>
								<img src="${ctx }/image/pic184.png" alt="" class="evaluateGoodsI evaluateGoodsM"/>
							</c:otherwise>
						</c:choose>
					</a>
					<div class="evaluateGoodsW">
						<p class="moreWord">${goods.name }</p>
						<p class="">折、增</p>
						<p class="prices">
							<b>¥ ${goods.marketPrice }</b>
							<span>月销 ${goods.monthSaleMount}笔</span>
							<span></span>
						</p>
					</div>
       		</c:forEach>
		</ul> --%>
		
		
			<!--   商品列表展示         结束-->
			<div class="recommend six r tac border">
					<p>热卖推荐</p>
					<ul>
						<c:forEach items="${goodsHotList}" var="goods" varStatus="status">
							<c:if test="${status.index<8}">
								<li>
									<a href="${ctx}/goods/queryGoodsDetail?id=${goods.id}" target="_blank">
										<c:choose>
												<c:when test="${goods.picture!=null }">
													<img src="${baseFile}${goods.picture}" style="width: 130px;height: 130px;" alt="白色碎花欧根纱" />
												</c:when>
												<c:otherwise>
													<img src="${ctx}/images/rec1.png" alt="" />
												</c:otherwise>
											</c:choose>
										<p>￥${goods.marketPrice}</p>
									</a>							
								</li>
							</c:if>
						</c:forEach>
					</ul>	
				</div>
				
				<!--分页   标签开始-->
				<div class="clearfixPage">
					<ul class="page" maxshowpageitem="5" pagelistcount="50"  id="page"></ul>
				</div>	
				<!--分页   标签结束-->
		</div>
	
	</body>
	<script type="text/javascript">
	//搜索
	    var classId = ${classId};
	    var searchName = $("#searchName").val(); 
	    var GG = {
	        "kk":function(mm){
	        	$("#page").click(function() {
	        		if(classId == 'null'){
	        			location.href="${ctx}/goodsClass/queryGoodsClassList?searchName="+searchName+"&currPage="+mm+"";
	        		}else{
	        			location.href="${ctx}/goodsClass/queryGoodsClassList?classId="+classId+"&currPage="+mm+"";
	        		}
	        	
	        	});
	        }
	    };
    	$("#page").initPage(${totalRecords},${currentPage},GG.kk);
    	
   /**
	 * 商品列表
	 * 根据综合排序
	**/
	function btnSort(type){
		var class_Id = $("#class_Id").val();
		var searchName = $("#searchName").val();
		$.ajax({
			url : "${ctx}/goods/productCenterList",
			type : "post",
			data : {"type":type,"classId":class_Id,"searchName":searchName},
			async: false,
			success: function(data,status){
				var resultList = data.resultList;
				var currentPageT = data.currentPage;
				var totalCount = data.totalRecords;//总条数
				//alert(JSON.stringify(resultList))
			//	alert("当前页数："+currentPage+"---总数:"+totalRecords)
				//移除已有的标签元素数据
				$("#pro_list li").remove();
				var html="";
					//遍历结果信息
				$.each(resultList, function(i,item){      
					html+= "<li> "
						+" 		<div class='img'> "
						+" 		<a href='${ctx}/goods/queryGoodsDetail?id="+item.id+"' target='_blank' > "
								var picture = item.picture;
								if(picture!=null && picture!=''){
									html += " <img src='${baseFile}"+item.picture+"' alt='' /> "
								}else{
									html+= " <img src='${ctx}/images/tu1-big.png' alt='' /> "
								}
						html+="  </a> "
						+" 	</div> "
						+" 	<div class='small_img'>"
						//显示列表图片
						var imageList = item.imageFile;
						if(imageList!=null && imageList!=''){
							var val = imageList.split(";");
							html += " <span onclick='onSwitch();' class='selected'><img src='${baseFile}"+val[0]+"' alt='' /></span> ";
							for(var i=0; i<val.length;i++){
								if(i>0 && i<3){
									html += " <span onclick='onSwitch();'><img src='${baseFile}"+val[i]+"' alt='' /></span> ";
								}
							}
						}else{
							html+="	<span class='selected'><img src='${ctx}/images/tu1-small1.png' alt='' /></span> "
								+" 	<span ><img src='${ctx}/images/tu1-small2.png' alt='' /></span> "
								+" 	<span ><img src='${ctx}/images/tu1-small3.png' alt='' /></span> "
						}
						html+=" 	</div> "
							+" <p class='moreWord'>"+item.name+"</p> "	
							+" 	<p class='prices'> "
					//		+" 		<%-- ¥ ${goods.marketPrice } --%>
							+" 		<p class='sales' style='height: 22px;'>"+item.proTitle+"</p> "
							+" 		<span>月销 "+item.monthSaleMount+"笔</span> "
							+" 	</p> "
							+" 	<p><span class='f20 red'>￥"+item.marketPrice+"</span><a href='${ctx}/goods/queryGoodsDetail?id="+item.id+"' class='r f12 buy'>立即购买</a></p> "
						
						+" </li> ";
				});
			//	onSwitch();	
				//绑定现有的元素数据
				$("#pro_list").append(html);
				//商品列表  初始化，绑定事件
				onSwitch();
				a_flag = false;
				$("#page").initPage(totalCount,currentPageT,GG.kk);
			},
			error :	function(xhr, status,e){
				alert("数据异常，请检查服务器"+e);
			}
		
		}); 
	}
	
	
	$(function(){
		//商品列表
		$('.p_list .small_img span').click(function(){
			$(this).addClass('selected').siblings().removeClass('selected');
			var $s_src = $(this).find('img').attr('src');
			$(this).parents('li').find('.img img').attr('src',$s_src)
		});
	});
	
	//切换图片事件
	 function onSwitch(){
		$('.p_list .small_img span').click(function(){
			$(this).addClass('selected').siblings().removeClass('selected');
			var $s_src = $(this).find('img').attr('src');
			$(this).parents('li').find('.img img').attr('src',$s_src)
		});
	}
	</script>
</html>
